<template>
  <div class="todo">
    <p>count: {{count}}</p>
    <p>doubleCount: {{doubleCount}}</p>
    <button @click="add">增加</button>
    <p>
      <input type="text" v-model="message"/>
    </p>
    <p>{{message1}}</p>
  </div>
</template>

<script>
  import { ref,toRefs,reactive,watch,computed } from 'vue'
  export default{
    setup(){
      const message = ref('消息');
      const state = reactive({
        count: 0,
        doubleCount: computed(()=> state.count * 2),
        
      })
      const add = ()=>{
        state.count++
      }
      
      watch(
        () => state.count,
        (val,oldVal) => { console.log(`new count: ${val}, old count: ${oldVal}`) }
      )
      
      const message1 = computed(()=> message.value)
      
      
      
      return{
        message,
        message1,
        add,
        ...toRefs(state)
      }
    }
  }
</script>

<style lang="less">
</style>
